<template>
	<scroll-view scroll-y="true" class="scroll-view">
		<view class="section">
			<text class="section-title">泉州风光</text>
		</view>
		<view style="padding: 30rpx;">
			<swiper circular indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item style="background-color: #808080;">
					<image src="/static/city1.png" style="width: 100%;" />
				</swiper-item>
				<swiper-item>
					<image src="/static/city3.jpg" style="width: 100%;" />
				</swiper-item>
				<swiper-item>
					<image src="/static/city4.jpg" style="width: 100%;" />
				</swiper-item>
			</swiper>
		</view>

		<view class="section">
			<text class="section-title">泉州介绍</text>
			<rich-text :nodes="cityIntro"></rich-text>
		</view>

		<view class="section">
			<text class="section-title">探索进度</text>
			<view class="progress-box">
				<text class="progress-text">当前进度：60%</text>
				<progress percent="60" show-info="true" stroke-width="2" active="true"></progress>
			</view>
		</view>

		<view class="section">
			<text class="section-title">选择城市</text>
			<view class="picker-box">
				<picker mode="region" @change="onRegionChange">
					<view class="picker-display">{{ regionValue }}</view>
				</picker>
			</view>
		</view>
		<view class="section">
			<text class="section-title">泉州宣传</text>
			<video class="video" src="/static/city-video.mp4" controls autoplay="true" poster="/static/video-poster.jpg"
				show-play-btn="true" show-center-play-btn="true"></video>
		</view>

		<view class="section">
			<text class="section-title">偏好设置</text>

			<view class="preference-item">
				<text class="preference-label">出行方式：</text>
				<radio-group @change="onTransportChange">
					<label class="radio-option">
						<radio value="bus" :checked="transport === 'bus'"></radio>公交
					</label>
					<label class="radio-option">
						<radio value="drive" :checked="transport === 'drive'"></radio>自驾
					</label>
					<label class="radio-option">
						<radio value="walk" :checked="transport === 'walk'"></radio>步行
					</label>
				</radio-group>
			</view>

			<view class="preference-item">
				<text class="preference-label">显示推荐景点：</text>
				<switch :checked="showRecommend" @change="onShowRecommendChange"></switch>
			</view>

			<view class="preference-item">
			  <text class="preference-label">探索半径(km)：</text>
			  <view class="slider-group">
			    <text class="radius-value">{{ radius }}</text>
			    <slider 
			      min="1" 
			      max="200" 
			      :value="radius" 
			      @change="onRadiusChange"
			    ></slider>
			  </view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				cityIntro: `<p style="font-size: 16px; color: #333; line-height: 1.6;"><strong>城市介绍</strong>：泉州是福建省三大中心城市之一，地处东南沿海，历史悠久。它是古代 “海上丝绸之路” 重要节点，有 “东方第一大港” 之称，多元文化交融，是首届 “东亚文化之都”，也是全国著名侨乡和台湾汉族同胞主要祖籍地。</p>`,
				regionValue: '当前选择：福建省 - 泉州市 - 丰泽区',
				transport: 'bus',
				showRecommend: true,
				radius: 10
			}
		},
		methods: {
			onTransportChange(e) {
				this.transport = e.detail.value;
				console.log('选择的出行方式：', this.transport);
			},
			onShowRecommendChange(e) {
				this.showRecommend = e.detail.value;
				console.log('是否显示推荐景点：', this.showRecommend);
			},
			onRadiusChange(e) {
				this.radius = e.detail.value;
				console.log('探索半径：', this.radius);
			}
		}
	}
</script>

<style scoped>
	.scroll-view {
		height: 100vh;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.section {
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.progress-box {
		margin-top: 10rpx;
	}

	.progress-text {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		display: block;
	}

	.picker-box {
		margin-top: 10rpx;
	}

	.picker-display {
		border: 1px solid #ddd;
		padding: 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.video {
		width: 100%;
		height: 400rpx;
		border-radius: 8rpx;
		object-fit: cover;
	}
	
	.preference-item {
	  display: flex;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	
	.preference-label {
	  font-size: 28rpx;
	  width: 200rpx;
	}
	
	.radio-option {
	  margin-right: 30rpx;
	  font-size: 28rpx;
	}
	
	.radius-value {
	  font-size: 28rpx;
	  margin: 0 20rpx;
	}
	
	.preference-item {
	  display: flex;
	  align-items: center;
	  margin-bottom: 20rpx;
	  padding-right: 20rpx; 
	}

	.preference-label {
	  font-size: 28rpx;
	  width: 180rpx; 
	  flex-shrink: 0; 
	}

	.slider-group {
	  display: flex;
	  align-items: center;
	  flex: 1; 
	}

	.radius-value {
	  font-size: 28rpx;
	  min-width: 50rpx; 
	  text-align: center;
	  margin: 0 15rpx; 
	}
	
	slider {
	  flex: 1; 
	  height: 10rpx;
	}
</style>